<!-- Dom模板 -->
<template>
  <div class="shop">
    <!-- Dom内容 -->
    <div class="shops">
      <ul class="shopa">
        <li>
          <h1>店铺名称：</h1>
          <input type="text" v-model="obj.name" placeholder="请输入店铺名称" />
        </li>
        <li>
          <h1>店铺照片：</h1>
          <div class="imgs">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :http-request="upload"
            >
              <img v-if="obj.img" :src="obj.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </li>
        <li>
          <h1>营业状态：</h1>
          <div>
            <el-select v-model="obj.title" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :style="{'text-align': 'center'}"
              ></el-option>
            </el-select>
          </div>
        </li>
        <li>
          <h1>营业时间：</h1>
          <div>
            <el-time-select
              v-model="obj.time"
              :picker-options="{ start: '07:00',step: '00:30',end: '22:30'}"
              placeholder="选择时间"
            ></el-time-select>
            <p>&nbsp;&nbsp;至&nbsp;&nbsp;</p>
            <el-time-select
              v-model="obj.times"
              :picker-options="{ start: '07:00',step: '00:30',end: '22:30'}"
              placeholder="选择时间"
            ></el-time-select>
          </div>
        </li>
        <li>
          <h1>联系方式：</h1>
          <input type="text" v-model="obj.mobile" placeholder="请输入联系方式" />
        </li>
        <li>
          <h1>店铺地址：</h1>
          <div>
            <div id="app">
              <el-cascader
                size="large"
                :options="option"
                v-model="selectedOptions"
                @change="handleChange"
              ></el-cascader>
            </div>
          </div>
        </li>
        <li>
          <h1>详细地址：</h1>
          <input type="text" v-model="obj.addre" placeholder="请输入详细地址" />
        </li>
        <li>
          <button @click="tijiao">确定</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import {
  provinceAndCityData,
  CodeToText,
  TextToCode
} from "element-china-area-data";
import { uploadToGithub } from "./utils/upload.js";
import getFileBase64 from "./utils/toBse64.js";
import request from "../../request/index";
export default {
  name: "",
  data() {
    return {
      // msg: "测试",
      obj: {
        name: "",
        img: "",
        title: "",
        time: "",
        times: "",
        mobile: "",
        address: "",
        addre: ""
      },
      options: [
        {
          value: "休业",
          label: "休业"
        },
        {
          value: "营业",
          label: "营业"
        }
      ],
      option: provinceAndCityData,
      selectedOptions: [],
      imageUrl: "https://cdn.jsdelivr.net/gh/zhang-1947/cdn/"
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  async created() {
    await request({
      url: "/froms/shop",
      method: "GET",
      params: {}
    }).then(res => {
      if (res[0] && res[0].name && res[0].name !== "") {
        this.obj = res[0];
        let data = res[0].address.split("/");
        this.selectedOptions = [
          TextToCode[data[0]].code,
          TextToCode[data[0]][data[1]].code
        ];
      }
    });
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    handleChange(value) {
      this.obj.address = CodeToText[value[0]] + "/" + CodeToText[value[1]];
    },
    tijiao() {
      let data = [];
      for (let key in this.obj) {
        if (this.obj[key] === "") {
          data.push(false);
        }
      }
      let arrs = /^1[3-9][0-9]{9}$/;
      if (data.length !== 0) {
        this.$message({
          message: "请输入完整的信息",
          duration: 1500
        });
      } else if (!arrs.test(this.obj.mobile)) {
        this.$message({
          message: "请输入正确的手机号",
          duration: 1500
        });
      } else {
        request({
          url: "/froms/tijiao",
          method: "GET",
          params: this.obj
        }).then(res => {
          this.$message({
          message: res,
          duration: 1500
        });
        });
      }
    },
    async upload(param) {
      let base64Img = await getFileBase64(param.file);
      let res = await uploadToGithub(param.file.name, base64Img);
      this.obj.img = this.imageUrl + res.data.content.path;
      console.log(this.obj.img);
    }
  }
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.shop {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shops {
  width: 94%;
  height: 94%;
}
.shopa {
  width: 50%;
  height: 100%;
}
.shopa li {
  width: 100%;
  /* height: 50px; */
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.shopa li h1 {
  font-size: 13px;
  font-weight: 400;
}
.shopa li input {
  border: none;
  outline: none;
  width: 300px;
  height: 40px;
  text-indent: 1em;
  font-size: 13px;
  border-radius: 5px;
}
.shopa li div {
  display: flex;
  align-items: center;
}
.shopa li button {
  width: 120px;
  height: 40px;
  border: none;
  outline: none;
  background: #ccc;
  margin-top: 20px;
  border-radius: 5px;
  color: white;
  background-color: #3ca1ff;
}
.shopa li .imgs {
  width: 178px;
  height: 184px;
  background: #ccc;
  border-radius: 5px;
}
.shopa li .imgs img {
  width: 178px;
  height: 184px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 13px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>